<!DOCTYPE html>

<head>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <!-- import Vue before Element -->
  <script src="/vue.js"></script>
  <!-- import element-ui JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <div id="app">
    <el-form ref="form1" :model="formdata" style="position:relative;height:600px;" :rules="rules" :inline-message="true"
      :show-message="false">
      <el-form-item style="position:absolute; top:100px;left:100px;" label="年龄" prop="age">
        <el-input id="expinput" type="age" v-model.number="formdata.age" autocomplete="off" placeholder=""></el-input>
      </el-form-item>
      <el-form-item style="position:absolute; bottom:200px;left:100px;">
        <el-button type="primary" @click="submitForm('form1')">提交</el-button>
        <el-button @click="resetForm('formdata')">重置</el-button>
        <el-button ref="aaa" @click="go">hehe</el-button>
      </el-form-item>
    </el-form>
  </div>
</head>

<script>

  var expinput = "abc"
  console.log(expinput)

  var demo = new Vue({
    el: "#app",
    data() {
      return {
        formdata: {
          age: ''
        },
        rules: {
          age: [{ required: true }, { type: 'number' }]
        }
      };
    },

    computed: {


    },
    mounted() {

    },

    methods: {
      go(e) {
        console.log(this.$refs.aaa)
        this.$refs.aaa.$el.style.border = "2px #BBB solid"
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid, errField) => {
          console.log(valid, errField)
          if (valid) {
            alert('submit!' + this.formdata.age);
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }

    }
  });
</script>